<!-- <ion-header>
  <ion-toolbar>
    <ion-title class="i_toolbar">
      <div class="ion-float-left">
        <ion-icon name="chevron-back-outline" class="back_icon" (click)="backToAccount()"></ion-icon>
      </div>
      <div class="ion-float-right">
        <ion-text class="ion-float-right-text">
          REPAYMENT
        </ion-text>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header> -->
<app-common-header [title]="'myAccount.repayment.title' | translate"  [routerUrl]="'/tabs/myAccount'"></app-common-header>

<ion-content>
  <div class="content_background">
    <div class="form_item">
      <div class="contens_item">
        <ion-grid>
          <ion-row>
            <ion-col class="ion-text-left">
              <ion-text color="">
              {{'myAccount.repayment.current_balance' | translate}}
              </ion-text>
            </ion-col>
            <ion-col class="ion-text-right">
              <ion-text color="">
                $ 5,000.00
              </ion-text>
            </ion-col>
          </ion-row>
          <ion-row class="lines_full">
            <ion-col class="ion-text-left">
              <ion-text color="">
                  {{'myAccount.repayment.os_balance' | translate}}
              </ion-text>
            </ion-col>
            <ion-col class="ion-text-right">
              <ion-text color="">
                $ 5,000.00
              </ion-text>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-text color="" class="normal_font">
                  {{'myAccount.repayment.due_date' | translate}}
              </ion-text>
            </ion-col>
            <ion-col class="ion-text-right">
              <ion-text color="" class="normal_font">
                04-27
              </ion-text>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-text color="" class="normal_font">
                  {{'myAccount.repayment.opening_date' | translate}}
              </ion-text>
            </ion-col>
            <ion-col class="ion-text-right">
              <ion-text color="" class="normal_font">
                04-28
              </ion-text>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-text color="" class="normal_font">
                  {{'myAccount.repayment.minimum_pay' | translate}}
              </ion-text>
            </ion-col>
            <ion-col class="ion-text-right">
              <ion-text color="" class="normal_font">
                $ 300.00
              </ion-text>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-text color="" class="normal_font">
                  {{'myAccount.repayment.available_credit' | translate}}
              </ion-text>
            </ion-col>
            <ion-col class="ion-text-right">
              <ion-text color="" class="normal_font">
                $ 10.000.00
              </ion-text>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
      <div class="contens_item ion-margin-top">
        <ion-grid>
          <ion-row>
            <ion-col class="ion-text-left">
              <ion-text color="" class="normal_font">
                  {{'myAccount.repayment.repayment_amount' | translate}}
              </ion-text>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col class="ion-text-left">
              <ion-label class="label_size">
                $
                <ion-text color="" class="normal_font amt_font">
                  5,000.00
                </ion-text>
              </ion-label>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
      <div>
        <ion-grid>
          <ion-row>
            <ion-col class="ion-text-left">
              <ion-text color="" class="normal_font">
                  {{'myAccount.repayment.bottom_comment' | translate}}
              </ion-text>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>
</ion-content>
<ion-tab-bar>
    <div class="bottom_btn">
        <ion-grid  class="clean_padding">
          <ion-row class="">
            <ion-col  class="clean_padding">
              <div>
                <ion-button color="lightOrange" expand="full" (click)="toPaymentPassword()">
                    {{'myAccount.repayment.button' | translate}}
                </ion-button>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
</ion-tab-bar>